<script setup lang="ts">
import { useTheme } from '@/composables/useTheme'

const { themes, currentTheme, setTheme } = useTheme()
</script>

<template>
  <div class="theme-switcher">
    <div class="theme-grid">
      <div
        v-for="theme in themes"
        :key="theme.id"
        class="theme-option"
        :class="{ active: currentTheme.id === theme.id }"
        @click="setTheme(theme.id)"
      >
        <div
          class="theme-preview"
          :style="{
            background: theme.colors['bg-primary'],
            border: `1px solid ${theme.colors['border-color']}`,
          }"
        >
          <div class="preview-accent" :style="{ background: theme.colors['laser-cyan'] }"></div>
          <div
            class="preview-secondary"
            :style="{ background: theme.colors['hologram-purple'] }"
          ></div>
          <div
            class="preview-tertiary"
            :style="{ background: theme.colors['supernova-orange'] }"
          ></div>
        </div>
        <div class="theme-name">{{ theme.name }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.theme-switcher {
  padding: 20px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
}

.theme-option {
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}

.theme-option:hover {
  transform: translateY(-2px);
}

.theme-option.active .theme-preview {
  box-shadow: var(--glow-shadow);
  transform: scale(1.05);
}

.theme-preview {
  height: 80px;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.3s ease;
}

.preview-accent,
.preview-secondary,
.preview-tertiary {
  height: 8px;
  border-radius: 4px;
}

.theme-name {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.theme-option.active .theme-name {
  color: var(--laser-cyan);
  font-weight: 500;
}
</style>
